<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('表结构信息')" />
    <th:block th:include="include :: select2-css" />
    <style type="text/css">
        .select-table table{table-layout:fixed;}.table>thead>tr>th{text-align:center;}.select-table .table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.form-control{padding:3px 6px 4px;height:30px;}.icheckbox-blue{top:0px;left:6px;}.form-control.select2-hidden-accessible{position:static!important;}.select-table table label.error{position: inherit;}select + label.error{z-index:1;right:40px;}
    </style>
</head>
<body class="gray-bg" style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
<section class="section-content">
    <div class="row">
        <div class="col-xs-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content" style="border-style:none;">
                    <div class="nav-tabs-custom">
                        <form id="config-form">
                            <input id="tableName" type="hidden" name="tableName" th:value="${table_name}" />
                            <div class="select-list">
                                <input type="hidden" name="pwdHome" id="pwdHome">
                                <ul>
                                    <li>
                                        字段名称：<input type="text" name="columnName"/>
                                    </li>
                                    <li>
                                        字段类型：<select name="dataType">
                                        <option value="">选择类型</option>
                                        <option value="VARCHAR2">VARCHAR2</option>
                                        <option value="NUMBER">NUMBER</option>
                                        <option value="DATE">DATE</option>
                                        <option value="CHAR">CHAR</option>
                                    </select>
                                    <li>
                                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                    </li>
                                </ul>
                            </div>
                        </form>
                        <br>
                        <div class="container-div" style="margin-right: 100px;margin-top: 40px;">
                            <div class="btn-group-sm" id="toolbar" role="group">
                                <a class="btn btn-success" onclick="add()">
                                    <i class="fa fa-plus"></i>新增一列
                                </a>
                            </div>
                        </div>
                        <form id="form-gen-edit" class="form-horizontal" th:object="${table}">
                            <div class="tab-content">
                                    <div class="select-table table-striped" style="margin-top: 0px;padding-top: 0px;padding-bottom: 0px;">
                                        <table id="bootstrap-table" class="table text-nowrap" data-use-row-attr-func="true" data-reorderable-rows="true"></table>
                                    </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-table-editable-js" />
<th:block th:include="include :: use-js"/>
<script th:src="@{/js/jquery.tmpl.js}"></script>
<script type="text/javascript">

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.saveTab(prefix + "/edit", $("#form-gen-edit").serializeArray());
        }
    }

    var prefix = ctx + "db/config";
    $(function() {
        var options = {
            url: prefix + "/findViewList",
            sortName: "sort",
            sortOrder: "desc",
            height: $(window).height() - 166,
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            onEditableSave: onEditableSave,
            onLoadSuccess: onLoadSuccess,
            queryParams: queryParams,
            columns: [{
                field: 'COLUMN_ID',
                title: '字段ID',
                class: "nodrag",
                align: 'center',
                visible:false,
                cellStyle: function(value, row, index) {
                    return { css: { "cursor": "default" } };
                },
                formatter: function(value, row, index) {
                    return value;
                }
            },
                {
                    field: 'COLUMN_NAME',
                    title: '字段名称',
                    class: "nodrag",
                    align: 'center',
                    editable : {
                        type : 'text',
                        title : '字段名称',
                        validate : function(value) {
                            if (value.length == 0) {
                                return '字段名称不能为空';
                            }
                        }
                    },
                    cellStyle: function(value, row, index) {
                        return { css: { "cursor": "default" } };
                    },
                    formatter: function(value, row, index) {
                        return value.toLowerCase();
                    }
                },
                {
                    field: 'DATA_TYPE',
                    title: '字段类型',
                    class: "nodrag",
                    align: 'center',
                    editable: true,
                    /*editable : {
                        type : 'select',
                        title : '类型',
                        source : [
                            {
                                value : 'NUMBER',
                                 text : 'NUMBER'
                            },{
                                value : 'DATE',
                                 text : 'DATE'
                            },{
                                value : 'VARCHAR2',
                                 text : "VARCHAR2"
                            },{
                                value : 'CHAR',
                                 text : 'CHAR'
                            }
                        ]
                    },*/
                    cellStyle: function(value, row, index) {
                        return { css: { "cursor": "default" } };
                    },
                    formatter: function (value, row, index) {
                        return value + '(' + row.DATA_LENGTH  + ')' ;
                    }
                },
                /*{
                    field: 'DATA_DEFAULT',
                    title: '默认值',
                    class: "nodrag",
                    align: 'center',
                    cellStyle: function(value, row, index) {
                        return { css: { "cursor": "default" } };
                    }
                },*/
                {
                    field: 'COMMENTS',
                    title: '字段描述',
                    align: 'center',
                    editable: true,

                },
                {
                    field: 'NULLABLE',
                    title: '可为空',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var isCheck = value == 'N' ? '' : 'checked';
                        var html = $.common.sprintf("<label class='check-box'><input type='checkbox' name='columns[%s].isRequired' value='N' %s></label>", index, isCheck);
                        return html;
                    }
                },
                {
                    field: 'PR',
                    title: '主键',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var isCheck = $.common.isEmpty(value) == true ? '' : 'checked';
                        var html = $.common.sprintf("<label class='check-box'><input type='checkbox' name='columns[%s].isRequired' value='true' %s></label>", index, isCheck);
                        return html;
                    }
                },{
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-danger btn-xs  href="javascript:void(0)" onclick="del(\'' + row.COLUMN_NAME + '\')"><i class="fa fa-trash"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });


    /**
     * 修改操作
     */
    function onEditableSave (field, row, oldValue, $el) {
        var  name = row.COLUMN_NAME;
        var initValue = $el.html();
        var data = {"field":field,"value":row[field],"tableName":$("#tableName").val(),"oldValue":initValue,"column":name}
        var json = JSON.stringify(data);
        var key = {"key":$.use.encrypt(json)}
        $.ajaxSettings.async = false;
        $.post(prefix + "/updateColumn",key,function (result) {
            if (result.code != '0'){
                $el.text(initValue);//修改失败，不改变旧值
                $.modal.alertWarning(result.msg);
            }
        })
    }

    /**
     * 清除字段
     */
    function del(obj) {
        //value默认0过验证
        var data = {"field":'false',"value":"false","tableName":$("#tableName").val(),"oldValue":"false","column":obj}
        var json = JSON.stringify(data);
        var key = {"key":$.use.encrypt(json)}
        $.ajaxSettings.async = false;
        $.post(prefix + "/updateColumn",key,function (result) {
            if (result.code == '0'){
                $.modal.msgSuccess(result.msg);
                $.table.refresh();
            } else {
                $.modal.msgError(result.msg);
            }
        })
    }

    function queryParams(params) {
        var search = $.table.queryParams(params);
        search.tableName = $("#tableName").val();
        return search;
    }

    // 当所有数据被加载时触发处理函数
    function onLoadSuccess(data){
        $.fn.select2.defaults.set( "theme", "bootstrap" );
        $("select.form-control").each(function () {
            $(this).select2().on("change", function () {
                $(this).valid();
            })
        })
        $(".check-box").each(function() {
            $(this).iCheck({
                checkboxClass: 'icheckbox-blue'
            })
        })
    }

    // 当拖拽结束后处理函数
    function onReorderRow(data) {
        for (var i = 0; i < data.length; i++) {
            $("#columns_sort_" + data[i].columnId).val(i+1);
        }
    }

    $(function() {
        var tplCategory = $("#tplCategory option:selected").val();
        tplCategoryVisible(tplCategory);
    });

    $('#tplCategory').on('select2:select', function (event) {
        var tplCategory = $(event.target).val();
        tplCategoryVisible(tplCategory);
    });

    function tplCategoryVisible(tplCategory) {
        if("crud" == tplCategory){
            $("#treeCode").select2("val", [""]);
            $("#treeParentCode").select2("val", [""]);
            $("#treeName").select2("val", [""]);
            $("#otherInfo").addClass("hidden");

        } else if("tree" == tplCategory){
            $("#otherInfo").removeClass("hidden");
            $("#treeCode").attr("required", "true");
            $("#treeParentCode").attr("required", "true");
            $("#treeName").attr("required", "true");
        }
    }

    /**
     * 新增一列
     */
    function add(){
        $.modal.open("新增一列",prefix + "/add?TABLE_NAME=" + $("#tableName").val())
    }

</script>
</body>
</html>

</script>
